<template>
  <el-card class="mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" ref="formRef" :rules="rules" :model="form" label-width="200px" label-position="left" class="form-readonly">
      <el-form-item :label="$t('pageStr.enableLogClientStr')">
        <el-switch v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="form.enabled === '1'">
        <el-form-item :label="$t('pageStr.logServerIPAddrStr')" prop="logServerIPAddr" style="max-width: 500px">
          <el-input v-model="form.logServerIPAddr" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.logServerPortStr')" prop="logServerPort" style="max-width: 500px">
          <el-input-number v-model="form.logServerPort" style="width: 100%;" :min="1" :max="65535" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.logServerProtocolStr')" style="max-width: 500px">
          <div class="readonly__wrap w-full">UDP</div>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;" type="primary" @click="handleSubmit">
    {{$t('tabsStr.applyStr')}}
  </el-button>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import {reqSetLogInfo, reqGetLogSetInfo} from "@/api/system/log";
import {validateIP,permissionDisabled} from "@/utils";

const {t} = useI18n()
const formRef = ref(null)
const rules = {
  logServerIPAddr: [
    {required: true, message: t('emptyTip'), trigger: 'blur'},
    {validator: validateIP, message: '请输入正确的IP', trigger: 'change'}],
  logServerPort: [{required: true, message: t('emptyTip'), trigger: 'blur'}]
}
const form = ref({
  enabled: '',
  logServerIPAddr: '',
  logServerPort: '',
  logServerProtocol: 'udp',
})
onBeforeMount(getData)

function getData() {
  reqGetLogSetInfo().then((res) => {
    const data = res.logServerCfg
    form.value.enabled = data.enabled
    form.value.logServerIPAddr = data.log_ip
    form.value.logServerPort = data.log_port
    console.log('回显日志设置', data, form.value)
  })
}

function handleSubmit() {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('应用按钮', form.value)
      reqSetLogInfo(form.value).then(() => {
        ElMessage.success(t('successTip'))
      }).catch(() => {
        ElMessage.error(t('errorTip'))
      })
    }
  })
}
</script>

<style scoped>

</style>